<template>
  <div class="fillcontain" v-loading="dataListLoading">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" class="search_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="分支编码">
            <el-input v-model="dataForm.branchCode" placeholder="分支编码" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分支名称">
            <el-select v-model="dataForm.branchName" filterable clearable placeholder="请选择">
              <el-option
                v-for="item in allGroupInfo"
                :key="item.branchName"
                :label="item.branchName"
                :value="item.branchName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getDataList()"></el-button>
            <el-button icon="el-icon-refresh" @click="resetData()"></el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="contain">
      <!-- 操作按钮 -->
      <el-row>
        <el-col :span="24" class="pb15 pt5">
          <el-button type="info" plain size="mini" style="margin-left: 10px;" @click="createNewBranch()">新增分支</el-button>
        </el-col>
      </el-row>

      <!-- 查询结果列表 -->
      <div class="table_container">
        <!-- 列表 -->
        <el-table
          :data="dataList"
          border
          style="width: 100%; ">

          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-table
                v-if="scope.row.branchType==='2'"
                :data="scope.row.branchList"
                style="width: 100%">
                <el-table-column
                  type="index"
                  width="50">
                </el-table-column>
                <el-table-column
                  property="groupIdentify"
                  label="规则组标识">
                </el-table-column>
                <el-table-column
                  property="groupName"
                  label="规则组名称">
                </el-table-column>
                <el-table-column
                  label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                    <el-button type="text" size="small" @click="delGroup(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            prop="branchName"
            header-align="center"
            align="center"
            label="分支名称">
          </el-table-column>
          <el-table-column
            prop="branchCode"
            header-align="center"
            align="center"
            label="分支编码">
          </el-table-column>
          <el-table-column
            prop="branchDesc"
            header-align="center"
            align="center"
            label="分支描述">
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button v-if="scope.row.branchType==='2'"  type="text" size="small" @click="showMain(scope.row)">
                复制主干规则组
              </el-button>
              <el-button v-if="scope.row.branchType==='2'" type="text" size="small" @click="showMergeBranch(scope.row)">合并分支</el-button>
              <el-button v-if="scope.row.branchType==='2'" type="text" size="small" @click="delBranch(scope.row.id)">删除</el-button>

              <el-button v-if="scope.row.branchType==='1'"  type="text" size="small" @click="showMain(scope.row)">
                查看规则组
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <!-- 分页 -->
              <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="page.pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="page.pageSize"
                :total="page.totalPage"
                layout="total, sizes, prev, pager, next, jumper">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>


    <!-- 弹窗, 主干规则组 -->
    <listGroup v-if="listGroupVisible" ref="listGroup" @refreshDataList="getDataList"></listGroup>
    <!-- 弹窗, 新增分支 -->
    <addBranch v-if="addBranchVisible" ref="addBranch" @refreshDataList="getDataList"></addBranch>

    <!-- 弹窗, 合并分支 -->
    <el-dialog
      title="合并分支到主干"
      :visible.sync="showDemoVisbale"
      width="60%">

      <div>
        <div class="txt" v-for="data in demoData">
          <span>规则组：{{data.group.groupName}} -- {{data.group.groupIdentify}}</span>
          <pre>{{data.resultMsg}}</pre>
        </div>
      </div>

      <el-table
        :data="demoData"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table
              :data="scope.row.resultList"
              style="width: 100%">
              <el-table-column
                property="ruleCode"
                label="名称">
              </el-table-column>
              <el-table-column
                property="branchOper"
                label="分支">
                <template slot-scope="scope">
                  {{scope.row.branchOper | branchOperTypeFilter}}
                </template>
              </el-table-column>
              <el-table-column
                property="mainOper"
                label="主干">
                <template slot-scope="scope">
                  {{scope.row.mainOper | branchOperTypeFilter}}
                </template>
              </el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="scope">
                  <el-select v-if="scope.row.branchOper==='2'" v-model="scope.row.branchType" placeholder="请选择">
                    <el-option key="1" label="请勿修改" value="1"></el-option>
                    <el-option key="3" label="添加至主干" value="3"></el-option>
                  </el-select>
                  <el-select v-if="scope.row.mainOper==='2'" v-model="scope.row.branchType" placeholder="请选择">
                    <el-option key="1" label="请勿修改" value="1"></el-option>
                    <el-option key="2" label="从主干中移除" value="2"></el-option>
                  </el-select>
                  <el-select v-if="scope.row.branchOper==='1'" v-model="scope.row.branchType" placeholder="请选择">
                    <el-option key="1" label="请勿修改" value="1"></el-option>
                    <el-option key="2" label="在主干中替换" value="4"></el-option>
                  </el-select>
                  <el-select v-else v-model="scope.row.branchType" placeholder="请选择">
                    <el-option key="1" label="请勿修改" value="1"></el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="规则组名称">
          <template slot-scope="scope">
            {{scope.row.group.groupName}}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="规则组标识">
          <template slot-scope="scope">
            {{scope.row.group.groupIdentify}}
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showDemoVisbale = false">取 消</el-button>
        <el-button type="primary" @click="mergeBranch">合 并</el-button>
      </span>

    </el-dialog>

  </div>
</template>

<script>
    import {
        createBranch,
        mergeData,
        delGroup
    } from '@/api/ruleConfig/branchGroupInfo'
    import {pageData,delData,compareBeforeMerge,listBranch } from '@/api/ruleConfig/branchInfo'
    import ListGroup from './list-group'
    import AddBranch from './add-branch'
    import constant from "@/api/constant";

    export default {
        data() {
            return {
                listGroupVisible: false,
                addBranchVisible: false,
                branchCode: '',
                allGroupInfo: [],
                resultMsg: '',
                resultCode: '',
                demoData: [],
                showDemoVisbale: false,
                loading: false,
                templateStr: '',
                showVisbale: false,
                branchForm: {
                    groupName: '',
                    groupIdentify: '',
                    branchName: '',
                    id: '',
                },
                dataForm: {
                    branchCode: '',
                    branchName: ''
                },
                dataList: [],
                dataListLoading: false,
                addOrUpdateVisible: false,
                testConditionVisible: false,
                page: {
                    pageIndex: 1,
                    pageSize: 10,
                    totalPage: 0
                }
            }
        },
        components: {
            ListGroup,
            AddBranch
        },
        activated() {
            this.getDataList()
            this.initBranchInfo()
        },
        methods: {
            //新增分支
            createNewBranch(id){
              this.addBranchVisible = true
                this.$nextTick(() => {
                    this.$refs.addBranch.init(id)
                })
            },
            //弹出主干规则组
            showMain(data) {
                this.listGroupVisible = true
                this.$nextTick(() => {
                    this.$refs.listGroup.init(data.branchCode,data.branchName,data.branchType)
                })
            },
            initBranchInfo() {
                listBranch({}).then(res => {
                    if (res.data.data) {
                        this.allGroupInfo = res.data.data
                    }
                })
            },
            // 合并分支
            mergeBranch() {
                let data = []
                this.demoData.forEach(item=>{
                    data.push(...item.resultList)
                })
                let params = {
                    branchCode: this.branchCode,
                    mergeList: JSON.stringify(data),
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                mergeData(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    if (res.data && res.data.resultCode === 0) {
                        this.$message.success("合并成功")
                        this.showDemoVisbale = false
                    } else {
                        this.$message.error("合并失败：" + res.data.resultMsg)
                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                })
            },

            // 比较合并信息
            showMergeBranch(data) {
                this.demoData = []
                this.resultMsg = ''
                this.branchCode = data.branchCode
                let params = {
                    branchCode: data.branchCode
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                compareBeforeMerge(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    if (res.data.data) {
                        this.demoData = res.data.data
                        // this.resultMsg = res.data.data.resultMsg
                        // this.resultCode = res.data.data.resultCode
                    }
                    this.showDemoVisbale = true
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                })

            },
            // 重置查询条件
            resetData() {
                this.dataForm.branchCode = ''
                this.dataForm.branchName = ''
            },

            // 创建分支
            saveBranch() {
                // console.log(this.branchForm.branchName)
                if (!this.branchForm.branchName) {
                    this.$message.error("请输入分支名称")
                    return
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                createBranch(JSON.stringify(this.branchForm)).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    if (res.data.resultCode === 0) {
                        this.$message.success("创建分支成功")
                        this.showVisbale = false
                        this.getDataList()
                    } else {
                        this.$message.success("创建分支失败：" + res.data.resultMsg)
                    }

                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                })
            },

            // 每页数
            sizeChangeHandle(val) {
                this.page.pageSize = val
                this.page.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.page.pageIndex = val
                this.getDataList()
            },
            // 获取数据列表
            getDataList() {
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                let params = {
                    pageNumber: this.page.pageIndex,
                    pageSize: this.page.pageSize,
                    branchCode: this.dataForm.branchCode,
                    branchName: this.dataForm.branchName
                }
                pageData(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    this.dataList = res.data.data.list
                    this.page.totalPage = res.data.data.totalCount
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                })
            },


            // 新增 / 修改
            addOrUpdateHandle(id) {
                constant.clearTag(this)
                if (id) {
                    this.$router.push({path: "/drools-ruleConfig/branch/add-or-update/" + id})
                } else {
                    this.$router.push({path: "/drools-ruleConfig/branch/add-or-update"})
                }
            },
            // 删除分支
            delBranch(id) {
                this.$confirm(`确定进行[删除]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        id: id + ''
                    }
                    delData(params).then(res => {
                        if (res.data && res.data.resultCode === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        } else {
                            this.$message.error(res.data.resultMsg)
                        }
                    })
                }).catch(() => {
                })
            },
            // 删除规则组
            delGroup(data) {
                this.$confirm(`确定进行[删除]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delGroup(JSON.stringify(data)).then(res => {
                        if (res.data && res.data.resultCode === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        } else {
                            this.$message.error(res.data.resultMsg)
                        }
                    })
                }).catch(() => {
                })
            }

        },
        filters: {
            branchOperTypeFilter: function (value) {
                return constant.getLabel(value, constant.ruleConfig.branchOperType)
            }
        }
    }
</script>
<style>
  body .el-table th.gutter {
    display: table-cell !important
  }

  .txt {
    color: red;
  }
</style>
